import classNames from 'classnames';
import style from './index.less';
import './page.less';
import './font_bwauk1kag68/iconfont.css';
import { Pagination, message } from 'antd';
import { CommentModelState, useDispatch, useSelector } from 'umi';
import React, { useEffect, useState } from 'react';
import { emojis } from './emojis';
import { formatDate } from '@/utils/index';
interface IProps {
  id: string;
}
interface IParams {
  parentCommentId: string | null;
  replyUserEmail: string | null;
  replyUserName: string | null;
  url: string;
  id: string;
}
const Comments: React.FC<IProps> = ({ id }) => {
  const [current, setCurrent] = useState(1);
  const dispatch = useDispatch();
  const { commentList, commentLength } = useSelector(
    (state: { comment: CommentModelState }) => state.comment,
  );
   //  // 请求页面数据    
   useEffect(() => {
    //  评论的数据      
    dispatch({
      type: 'comment/getCommentList',
      payload: { id:id }
    })
  }, [id])
  const [show, showSet] = useState(false);
  const [key, keySet] = useState('');
  //评论
  const [inpValue, setInpValue] = useState('');
  const [inpValue2, setInpValue2] = useState('');
  const [inpValue3, setInpValue3] = useState('');
  //点击回复显示评论框
  function handleClick(param: string) {
    showSet(!show);
    keySet(param);
  }
  //点击收回按钮
  function takeBack() {
    showSet(!show);
  }
  //监听文本value
  const getChangeValue = (e: React.ChangeEvent) => {
    console.log(inpValue,'inpValue...');
    setInpValue((e.target as HTMLInputElement).value);
  };
  const getChangeValue2 = (e: React.ChangeEvent) => {
    console.log(inpValue2,'inpValue2...');
    setInpValue2((e.target as HTMLInputElement).value);
  };
  const getChangeValue3 = (e: React.ChangeEvent) => {
    console.log(inpValue3,'inpValue3...');
    setInpValue3((e.target as HTMLInputElement).value);
  };
  //点击最外层发布
  const releaseEvent1 = () => {
    const payload = {
      content: inpValue,
      email: '1984368380@qq.com',
      hostId: id,
      name: 'junnan',
      url: '/page/about',
    };
    if (inpValue) {
      console.log(inpValue);
      
      dispatch({
        type: 'comment/AddArticleCommend',
        payload,
      });
      message.success('评论成功');
      setInpValue('');
    } else {
      message.success('评论失败');
    }
  };
  //点击第一层发布
  const releaseEvent2 = (params: any) => {
    const { parentCommentId, replyUserEmail, replyUserName, url, id } = params;
    const data = {
      content: inpValue3,
      email: '1984368380@qq.com',
      hostId: id,
      name: 'junnan',
      parentCommentId: id,
      replyUserEmail,
      replyUserName,
      url,
    };
    dispatch({
      type: 'comment/AddArticleCommend',
      payload: data
    })
    if (inpValue3) {
      dispatch({
        type: 'comment/AddArticleCommend',
        payload: data,
      });
      message.success('评论成功');
      setInpValue3('');
      showSet(!show);
    } else {
      message.success('评论失败');
      console.log(inpValue2);
      showSet(!show);
    }
  };
  //点击第二层发布
  const releaseEvent3 = (params: any) => {
    console.log(params);
    
    const { parentCommentId, replyUserEmail, replyUserName, url, id } = params;
    const data = {
      content: inpValue2,
      email: '1984368380@qq.com',
      hostId: id,
      name: 'junnan',
      parentCommentId: id,
      replyUserEmail,
      replyUserName,
      url,
    };
    if (inpValue2) {
      dispatch({
        type: 'comment/AddArticleCommend',
        payload: data,
      });
      message.success('评论成功');
      setInpValue2('');
      showSet(!show);
    } else {
      console.log(inpValue2);
      
      message.success('评论失败');
      showSet(!show);
    }
  };
  // 表情
  const [flag, setFlag] = useState(false);
  const [kid, setKid] = useState('');
  function emojisflag(id: string = '') {
    setFlag(!flag);
    setKid(id);
  }

  const arry: any = [];
  let object: any = emojis;

  Object.keys(object).forEach(function (key: string) {
    arry.push(object[key]);
  });

  function addemojis(lis: string) {
    setInpValue((inpValue) => {
      return inpValue + lis;
    });
  }
  function addemojis1(lis: string) {
    setInpValue2((inpValue2) => {
      return inpValue2 + lis;
    });
  }
  function addemojis2(lis: string) {
    setInpValue3((inpValue3) => {
      return inpValue3 + lis;
    });
  }
  // 获取网站的全局配置
  useEffect(() => {
    dispatch({
      type: 'comment/getCommentList',
      payload: {
        id,
      },
    });
  }, []);

  function changePage(page: number, pageSize: number) {
    dispatch({
      type: 'comment/getCommentList',
      payload: {
        id,
        page,
      },
    });
    setCurrent(page);
  }
  return (
    /* 评论功能 */
    <div className={classNames(style.comment_container)}>
      <div className={classNames(style.comment_box)}>
        <p className={classNames(style._1hXJ8FkJwAyuM2)}>评论</p>
        <div className={classNames(style._3E53JQDjSQhUYjr)}>
          <div className={classNames(style.comment)}>
            <div className={classNames(style._13J4GEYHDRu5MejyviLpnU)}>
              <div className={classNames(style.N1BwmgIkZZbNoeNN_FRbs)}>
                <div className={classNames(style.TaXtx7NU2ZhkaBRHq0)}>
                  <textarea
                    placeholder="请输入评论内容（支持 Markdown）"
                    className={classNames(style.ant_input)}
                    onChange={(e) => getChangeValue(e)}
                    value={inpValue}
                    style={{
                      height: '142px',
                      minHeight: '142px',
                      maxHeight: '274px',
                      overflowY: 'hidden',
                      resize: 'none',
                    }}
                  ></textarea>
                  <footer>
                    <span
                      className={classNames(style._12avHmKjidVRHTuf5Qbd4K)}
                      onClick={() => emojisflag('')}
                    >
                      <i className="iconfont icon-xiaolian2"></i>
                      <span className={classNames(style.emojis)}>表情</span>
                    </span>
                    {flag && kid === '' && (
                      <ul>
                        {arry.map((item: string, index: number) => {
                          return (
                            <li onClick={() => addemojis(item)} key={index}>
                              {item}
                            </li>
                          );
                        })}
                      </ul>
                    )}
                    <div>
                      <button
                        disabled={inpValue === '' ? true : false}
                        type="button"
                        className={classNames(style.button)}
                        onClick={() => releaseEvent1()}
                      >
                        <span>发布</span>
                      </button>
                    </div>
                  </footer>
                </div>
              </div>
            </div>
            {/* 一级评论列表渲染 */}
            {commentList.map((item, index) => {
              return (
                <div
                  key={index}
                  className={classNames(
                    style._1f7ebMJKow4NcuDVTBnvOc,
                    style._3G7_JYLS4EIxTgILiJm_A5,
                  )}
                >
                  <header>
                    <span
                      className={classNames(style.avatar)}
                      style={{
                        width: '32px',
                        height: '32px',
                        lineHeight: '32px',
                        fontSize: '18px',
                        backgroundColor: 'rgb(255, 0, 100)',
                      }}
                    >
                      <span className={classNames(style.avatar_string)}>
                        {item.name[0].toUpperCase()}
                      </span>
                    </span>
                    <span className={classNames(style._3xprCsLyoqZkArtvYiuAJU)}>
                      <strong>{item.name}</strong>
                    </span>
                  </header>
                  <main style={{ padding: '12px 0px 12px 40px' }}>
                    <div>
                      <p>{item.content}</p>
                    </div>
                  </main>
                  <footer style={{ paddingLeft: '40px' }}>
                    <div>
                      <span>{item.userAgent} · </span>
                      <time>大约 {formatDate(item.createAt)}前</time>
                      <span
                        className={classNames(style.icon)}
                        onClick={() => handleClick(item.id)}
                      >
                        <i className="iconfont icon-kuaisuhuifu"></i> 回复
                      </span>
                    </div>
                    {/* 二级评论列表渲染 */}
                    {item.children.length
                      ? item.children.map((item, index) => {
                          return (
                            <div
                              key={index}
                              className={classNames(
                                style._1f7ebMJKow4NcuDVTBnvOc,
                                style._3G7_JYLS4EIxTgILiJm_A5,
                                style.pinglun,
                              )}
                            >
                              <header>
                                <span
                                  className={classNames(style.avatar)}
                                  style={{
                                    width: '24px',
                                    height: '24px',
                                    lineHeight: '24px',
                                    fontSize: '18px',
                                    backgroundColor: 'rgb(255, 0, 100)',
                                  }}
                                >
                                  <span
                                    className={classNames(style.avatar_string)}
                                  >
                                    {item.name[0].toUpperCase()}
                                  </span>
                                </span>
                                <span
                                  className={classNames(
                                    style._3xprCsLyoqZkArtvYiuAJU,
                                  )}
                                >
                                  <strong>
                                    {item.name} 回复 {item.replyUserName}
                                  </strong>
                                </span>
                              </header>
                              <main style={{ padding: '12px 0px 12px 40px' }}>
                                <div>
                                  <p>{item.content}</p>
                                </div>
                              </main>
                              <footer style={{ paddingLeft: '40px' }}>
                                <div>
                                  <span>{item.userAgent} · </span>
                                  <time>
                                    大约 {formatDate(item.createAt)}前
                                  </time>
                                  <span
                                    className={classNames(style.icon)}
                                    onClick={() => handleClick(item.id)}
                                  >
                                    <i className="iconfont icon-kuaisuhuifu"></i>{' '}
                                    回复
                                  </span>
                                </div>
                                {/* 二级回复 */}
                                {show && item.id === key && (
                                  <div
                                    style={{
                                      opacity: 1,
                                      height: '155px',
                                      overflow: 'hidden',
                                    }}
                                  >
                                    <div
                                      className={classNames(
                                        style._1oweEwxuizpZY8B_S3,
                                      )}
                                    >
                                      <div
                                        className={classNames(
                                          style.N1BwmgIkZZbNoeNN_FRbs,
                                        )}
                                      >
                                        <textarea
                                          onChange={(e) => getChangeValue2(e)}
                                          placeholder={'回复' + item.name}
                                          className={classNames(
                                            style.ant_input,
                                          )}
                                          value={inpValue2}
                                          style={{
                                            height: '98px',
                                            minHeight: '98px',
                                            maxHeight: '186px',
                                            overflowY: 'hidden',
                                            resize: 'none',
                                          }}
                                        ></textarea>
                                      </div>
                                      <footer>
                                        <span
                                          onClick={() => emojisflag(item.id)}
                                          className={classNames(
                                            style._12avHmKjidVRHTuf5Qbd4K,
                                          )}
                                        >
                                          <i className="iconfont icon-xiaolian2"></i>
                                          <span>表情</span>
                                        </span>
                                        {flag && kid === item.id && (
                                          <ul>
                                            {arry.map(
                                              (item: string, index: number) => {
                                                return (
                                                  <li
                                                    key={index}
                                                    onClick={() =>
                                                      addemojis1(item)
                                                    }
                                                  >
                                                    {item}
                                                  </li>
                                                );
                                              },
                                            )}
                                          </ul>
                                        )}
                                        <div>
                                          <button
                                            type="button"
                                            style={{ marginRight: '16px' }}
                                            className={classNames(
                                              style.btn,
                                              style.btn_sm,
                                            )}
                                            onClick={takeBack}
                                          >
                                            <span>收 起</span>
                                          </button>
                                          <button
                                            type="button"
                                            className={classNames(
                                              style.btn,
                                              style.btn_sm,
                                              style.btn_primary,
                                            )}
                                            disabled={
                                              inpValue2 === '' ? true : false
                                            }
                                            onClick={() => releaseEvent3(item)}
                                          >
                                            <span>发 布</span>
                                          </button>
                                        </div>
                                      </footer>
                                    </div>
                                  </div>
                                )}
                              </footer>
                            </div>
                          );
                        })
                      : ''}
                    {/* 一级回复 */}
                    {show && item.id === key && (
                      <div
                        style={{
                          opacity: 1,
                          height: '155px',
                          overflow: 'hidden',
                        }}
                      >
                        <div className={classNames(style._1oweEwxuizpZY8B_S3)}>
                          <div
                            className={classNames(style.N1BwmgIkZZbNoeNN_FRbs)}
                          >
                            <textarea
                              value={inpValue3}
                              onChange={(e) => getChangeValue3(e)}
                              placeholder={'回复' + item.name}
                              className={classNames(style.ant_input)}
                              style={{
                                height: '98px',
                                minHeight: '98px',
                                maxHeight: '186px',
                                overflowY: 'hidden',
                                resize: 'none',
                              }}
                            ></textarea>
                          </div>
                          <footer>
                            <span
                              onClick={() => emojisflag(item.id)}
                              className={classNames(
                                style._12avHmKjidVRHTuf5Qbd4K,
                              )}
                            >
                              <i className="iconfont icon-xiaolian2"></i>
                              <span>表情</span>
                            </span>
                            {flag && kid === item.id && (
                              <ul>
                                {arry.map((item: string, index: number) => {
                                  return (
                                    <li
                                      onClick={() => addemojis2(item)}
                                      key={index}
                                    >
                                      {item}
                                    </li>
                                  );
                                })}
                              </ul>
                            )}
                            <div>
                              <button
                                type="button"
                                style={{ marginRight: '16px' }}
                                className={classNames(style.btn, style.btn_sm)}
                                onClick={takeBack}
                              >
                                <span>收 起</span>
                              </button>
                              <button
                                type="button"
                                className={classNames(
                                  style.btn,
                                  style.btn_sm,
                                  style.btn_primary,
                                )}
                                disabled={inpValue3 === '' ? true : false}
                                onClick={() => releaseEvent2(item)}
                              >
                                <span>发 布</span>
                              </button>
                            </div>
                          </footer>
                        </div>
                      </div>
                    )}
                  </footer>
                </div>
              );
            })}

            <div style={{ opacity: 1 }}>
              <div
                className={classNames(style._3k5_guVzUUtXzu2skrNnws)}
                style={{ padding: '16px 0px' }}
              >
                <Pagination
                  current={current}
                  size="small"
                  defaultCurrent={1}
                  pageSize={6}
                  total={commentLength}
                  onChange={changePage}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Comments;
